<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="区域">
          <el-input v-model="area" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="所属地点">
          <el-input v-model="place" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="使用人工号">
          <el-input v-model="jobNumId" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="使用人">
          <el-input v-model="uname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="deptName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="领用物品">
          <el-input v-model="items" size="mini" readonly></el-input>
        </el-form-item>
        <el-form-item label="领用类型">
          <el-input v-model="classification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="领用数量">
          <el-input v-model="number" size="mini" readonly></el-input>
<!--&&          <el-button plain type="warning">库存：{{remain}}</el-button>-->
        </el-form-item>
        <el-form-item label="申请类型">
          <el-radio v-model="applytype" label="新增物品">新增物品</el-radio>
          <el-radio v-model="applytype" label="已坏更换">已坏更换</el-radio>
        </el-form-item>
        <el-form-item label="用途/更换原因">
          <el-input type="textarea" v-model="reason" size="mini"></el-input>
        </el-form-item>



        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <van-step v-show="oneShow">
              <p style="font-size:16px;font-weight: 900">指定审批人</p>
              <van-image v-for="(item,index) in ywusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
            </van-step>
            <van-step>
              <p style="font-size:16px;font-weight: 900">行政组</p>
              <van-image v-for="(item,index) in spusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
            </van-step>

          <van-step v-if="threeShow">
            <van-image v-for="(item,index) in thrusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px"><p style="font-size: 10px ;justify-content: center">{{item.name}}</p></van-image>
          </van-step>
          </van-steps>
        </div>


        <!-- 弹出框 -->
        <el-dialog :visible.sync="agreeShow" width="30%"><!--show-cancel-button :before-close="chargeAgreeBtn"-->
         <el-form-item label="审批意见" required>
            <el-input v-model="tgreason" size="mini"></el-input>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button @click="agreeShow = false">取消</el-button>
            <el-button type="primary" @click="chargeAgreeBtn">确 定</el-button>
          </div>
        </el-dialog>

        <van-dialog v-model="show" show-cancel-button :before-close="chargeBtn">
          <!-- 输入框 -->
          <el-form-item label="驳回原因" required>
            <el-input v-model="bhreason" size="mini"></el-input>
          </el-form-item>
        </van-dialog>

        <!--选择是新品还是老品-->
        <!--<van-dialog v-model="showWp" show-cancel-button confirm-button-text="新品" cancel-button-text="老品" @confirm="xp" @close="lp" message="请选择，老品需输入物品编号，以逗号隔开" >&lt;!&ndash;:before-close="setWpState"&ndash;&gt;
        </van-dialog>-->
        <el-dialog
                title="物品状态"
                :visible.sync="showWp"
                width="30%">
          <span>请选择，老品需输入物品编号，以逗号隔开</span>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="xp">新品</el-button>
              <el-button  @click="lp">老品</el-button>
          </span>
        </el-dialog>


        <!--如果是老品，需要输入物品编号-->
        <el-dialog title="分配老品" :visible.sync="showOld" width="30%"><!--//:before-close="setNum"-->
          <el-form-item label="物品编号" required>
            <el-input v-model="wpnumber" size="mini"></el-input>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setNum">确认</el-button>
              <el-button  @click="showOld=false">取消</el-button>
          </span>
        </el-dialog>

        <el-form-item>
          <el-button id="isAgree"  v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {
  data() {
    return {
      id:"",
      area:"",
      place:"",
      uname:"",
      deptId:"",
      deptName:"",//部门名称
      jobNumId:"",
      items:"",//领用物品
      classification:"",//公共-个人
      reason:"",
      number:"",
      remain:"",//选择物品的剩余数量
      applytype:"",
      active:"-1",//步骤索引,从0开始

      nowUser: '',
      title: "物品领用审批",
      fileList: [{fileId:""}],
      fileName:"",
      fileUrl:"",
      addArticlesApply: '/mobiles/addArticlesApply',

      spusers:[],//对应的行政组审批用户

      message1:"驳回",
      message:"通过",
      isShow:false,

      show:false,//驳回原因展示
      bhreason:"无",//驳回原因
      agreeShow:false,
      tgreason:"无",
      showWp:false,//物品状态，新品、老品
      showOld:false,//老品需要设置编号
      wpnumber:"",//老品编号

      oneShow:false,//第一层审批是否显示
      ywusers:[],//指定审批人
      threeShow:false,//主要是针对武汉有主管二级审批
      thrusers:[],
    };
  },

  created() {
    this.id=this.$route.params.id;
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.selXZUser();//查找行政组所有人
    this.getDetail();
  },

  methods: {

    preview(){
      //document.getElementById("preview").style.display= "";
      //this.pdfshow=true;
      this.$router.push({path: "/sp/pdfPreview/" + this.attachment});
    },

    //选择审批人，即行政组所有人
    /*selXZUser(){
      this.$https.post('/mobiles/selUsherByDept',{
        deptName:"行政组"
      }).then((res)=>{
        this.spusers=res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },*/
    selXZUser(){
      this.$https.post('/mobiles/selApplyUser',{
        nowUser:this.nowUser
      }).then((res)=>{
        debugger
        this.spusers=res.data.spusers;//相应地区的行政组人员
        this.ywusers=res.data.ywusers;//相应地区的一级审批人员（运维人员）
        if (res.data.thrusers){
          this.threeShow=true;
          this.thrusers=res.data.thrusers;
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //找到“运维-深圳”的审批人
    /*selywUser(){
      this.$https.post('/mobiles/selUsherByDept',{
        deptName:"运维-深圳"
      }).then((res)=>{
        this.ywusers=res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },*/

    //找到资产指定的管理者进行审批
    selArticlesManager(){
      this.$https.post('/mobiles/selArticlesManager',{
        area:this.area,
        place:this.place,
        goods:this.items,
      }).then((res)=>{
        this.spusers=res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },

    //获取对应申请的详情
    getDetail(){
      //console.log(id)
      this.$https.post('/mobiles/selArticlesDetail', {
        id:this.id,
        nowUser:this.nowUser,
      }).then((res)=>{
        this.area=res.data.data.area;
        this.place=res.data.data.place;
        this.uname=res.data.data.uname;
        this.jobNumId=res.data.data.jobnum;
        this.deptName=res.data.data.deptName;
        this.items=res.data.data.goods;
        this.classification=res.data.data.classification;
        this.number=res.data.data.number;
        this.applytype=res.data.data.applytype;
        this.reason=res.data.data.reason;
//&&        this.remain=res.data.data.remain;

        if (res.data.data.goods.indexOf("电脑")!==-1 || res.data.data.goods.indexOf("显示器")!==-1 || res.data.data.goods.indexOf("显示屏")!==-1 || res.data.data.goods.indexOf("主机")!==-1 || res.data.data.goods.indexOf("键盘")!==-1 || res.data.data.goods.indexOf("鼠标")!==-1 || res.data.data.goods.indexOf("硬盘")!==-1 || res.data.data.goods.indexOf("内存")!==-1){
          // this.selywUser();
          if (this.area.indexOf("武汉")!=-1){
            this.oneShow=false;
          }else {
            this.oneShow=true;
          }
          this.selArticlesManager();
        }else {
          this.oneShow=false;
          this.selArticlesManager();
        }
        if (res.data.data.agree == "已通过"){
          this.active="2";
          this.message='已通过';
          document.getElementById("isNotAgree").style.display= "none";
          this.isShow=true;
        }else if (res.data.data.agree == "已驳回"){
          if (res.data.data.ywShow && res.data.data.ywShow!=""){
            if (this.oneShow==true){
              this.active="0";
            }else {
              this.active="1";
            }
          }
          this.message1='已驳回';
          document.getElementById("isAgree").style.display= "none";
          this.isShow=true;
          this.bhreason=res.data.data.bhreason;
          document.getElementById("bhreason").style.display= "";

        }else if (res.data.data.approver && res.data.data.approver!=""){//存在审批人，但审批还没通过
          if (this.oneShow==true){
            this.active="0";
          }else {
            this.active="1";
          }
          if (res.data.data.ableShow=="0"){
            this.message='已同意';
            document.getElementById("isNotAgree").style.display= "none";
            this.isShow=true;
          }
        }

      }).catch(err => {
        console.log(err);
      })
    },

    // 提交同意
    submitAgree() {
      this.agreeShow=true;
    },
    chargeAgreeBtn(){//action,done
 //     if (action==='cancel'){
 //       done();
 //     }else if (action==='confirm'){

        for (var i=0;i<this.spusers.length;i++){
          debugger
          if (this.spusers[i].userId==this.nowUser){
            this.showWp=true;//展示选择新品老品
            break;
          }
          if (i==this.spusers.length-1){
            for (var j=0;j<this.ywusers.length;j++){
              if (this.ywusers[j].userId==this.nowUser){
                this.$https.post('/mobiles/isAgreeArticles', {
                  id:this.id,
                  tgreason: this.tgreason,
                  nowUser:this.nowUser,
                  wpnumber:this.wpnumber,
                  oneShow:this.oneShow
                }).then(res => {
                  if (res.data.code=='500'){
                    this.$toast(res.data.message);
                  }else {
                    Toast("已通过");
                    this.getDetail();//找到对应的页面详情，及领导信息
                  }

                }).catch(err => {
                  console.log(err)
                });
              }
            }
          }
        }

        this.agreeShow=false;
 //     }
    },

    xp(){
      this.showWp=false;
      this.$https.post('/mobiles/isAgreeArticles', {
        id:this.id,
        tgreason: this.tgreason,
        nowUser:this.nowUser,
        wpnumber:this.wpnumber,
        oneShow:this.oneShow
      }).then(res => {
        if (res.data.code=='500'){
          this.$toast(res.data.message);
        }else {
          Toast("已通过");
          this.getDetail();//找到对应的页面详情，及领导信息
        }
      }).catch(err => {
        console.log(err)
      });
    },
    lp(){
      this.showWp=false;
      this.showOld=true;//展示输入编号弹窗
    },
    /*选择物品状态；新品或老品*/
    setWpState(action){
      debugger
      if (action==='cancel'){//老品
        this.showWp=false;
        this.showOld=true;//展示输入编号弹窗
      }  else if (action==='confirm'){//新品
        this.showWp=false;
        this.$https.post('/mobiles/isAgreeArticles', {
          id:this.id,
          tgreason: this.tgreason,
          nowUser:this.nowUser,
          wpnumber:this.wpnumber,
          oneShow:this.oneShow
        }).then(res => {
          if (res.data.code=='500'){
            this.$toast(res.data.message);
          }else {
            Toast("已通过");
            this.getDetail();//找到对应的页面详情，及领导信息
          }
        }).catch(err => {
          console.log(err)
        });
      }
    },
    //若是老品，需要输入待分配物品的编号
    setNum(){//action
      /*if (action==='confirm'){
        this.showOld=false;
      }*/
      this.showOld=false;
      this.$https.post('/mobiles/isAgreeArticles', {
        id:this.id,
        tgreason: this.tgreason,
        nowUser:this.nowUser,
        wpnumber:this.wpnumber,
        oneShow:this.oneShow
      }).then(res => {
        if (res.data.code=='500'){
          this.$toast(res.data.message);
        }else {
          Toast("已通过");
          this.getDetail();//找到对应的页面详情，及领导信息
        }
      }).catch(err => {
        console.log(err)
      });
    },

    //驳回
    submitNotAgree() {
      this.show=true;
    },
    chargeBtn(action,done){
      if (action==='cancel'){
        done();
      }else if (action==='confirm'){
        this.show=false;
        this.$https.post('/mobiles/isNotAgreeArticles', {
          id:this.id,
          bhreason:this.bhreason,
          nowUser:this.nowUser,
        }).then(() => {
          Toast("已驳回");
          this.getDetail();//找到对应的页面详情，及领导信息
        }).catch(err => {
          console.log(err)
        });
      }
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
    /*// 提交
    submitPost() {
      if (!this.isNull()) return false;
      /!*var s = '';
      s = this.getImageUrl(s);*!/
      // on confirm
      this.$https.post(this.addArticlesApply, {
        area:this.area,
        uname:this.uname,
        jobNumId: this.jobNumId,
        deptId:this.deptId,
        items:this.items,
        number:this.number,
        applytype:this.applytype,
        reason: this.reason,
        fileId:this.fileList[this.fileList.length-1].fileId,

      }).then(res => {
        res;
        Toast("推送成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },*/
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>